<!--  -->
<script setup>
defineProps({ onSearch: Function, onCancel: Function })

const input = defineModel()

</script>

<template>
  <form action="/zh-CN/search" class="search-form" role="search">
    <input id="site-search" v-model="input" name="q" type="text" autocomplete="off" required value placeholder="开发中...">
    <div class="action-button">
      <button type="button" class="submit-button" @click="() => onSearch()">
        <div class="icon icon-submit"></div>
      </button>
      <button type="button" class="cancel-button" @click="() => onCancel()">
        <div class="icon icon-cancel"></div>
      </button>
    </div>
  </form>
</template>

<style scoped lang="scss">
.search-form {
  font-weight: 100;
  z-index: 1000;
  position: fixed;
  top: -60px;
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  background: var(--site-header-bgc);
  box-shadow: 2px 2px 3px var(--site-header-shadow);
  transition: .2s top ease-out;
}

#site-search {
  width: 40%;
  height: 80%;
  border: 1px solid var(--border-secondary);
  border-radius: 2px;
  outline: 0;
  padding: 0 .5rem;
  font-size: 1.5rem;
  background: transparent;
  color: var(--text-01);
  transition: background 0.2s ease-in-out;
  margin-top: 2px;
  margin-left: 10%;

  &:hover,
  &:focus {
    background: var(--site-home-subject-bgc);
  }

  @media screen and (max-width: 768px) {
    width: 70%;
    margin-left: 5%;
  }

  @media screen and (min-width: 769px) and (max-width: 882px) {
    width: 80%;
  }

  @media screen and (min-width: 883px) and (max-width: 992px) {
    width: 70%;
  }
}

.action-button {
  position: relative;
  height: 80%;
  width: 10%;
  min-width: 80px;
  max-width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cancel-button,
.submit-button {
  height: 100%;
  min-width: 40px;
  background: transparent;
  border: 0;

  &:hover .icon {
    background-color: red;
  }
}

.icon {
  mask-repeat: no-repeat;
  mask-position: center;
  vertical-align: middle;
  display: inline-block;
  background-color: var(--icon-bgc);
  margin: 1px;
  width: 18px;
  height: 18px;
}

.icon-cancel {
  mask-image: url('/static/svg/cancel.svg');
}

.icon-submit {
  mask-image: url('/static/svg/search.svg');
}
</style>
